import * as litElement from 'lit-element'
window.litElementLib = litElement
const { LitElement, html, css } = window.litElementLib
class MyControlWebview extends LitElement {
  static get styles() {
    return css`
<style>
:host {
}

:host {
  display: block;
  margin-top: 10px;
  padding-bottom: 10px;
}


.button {
  padding: 10px;
  background-color: transparent;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
  color: #2f332a;
  outline: none;
}

.button:hover {
 background-color: #dfdfdf;
}
</style>
    `
  }

  static get properties() {
    return {
      for: { type: String, reflect: true }
    };
  }

  constructor() {
    super();
    this.for = ''
  }

  updated(changedProps) {
    changedProps.forEach((changedProp, changedPropsKey) => {
      console.log(`${changedPropsKey} newValue: ${this[changedPropsKey]} oldValue: ${changedProp}`)
    })
  }

  handleSave() {
    if (window.vvg.blocks.save) {
      window.vvg.blocks.save()
      window.XyMessage.info('saved')
    }
  }
  handleHtml() {
    globalThis.getWebviewHtml(document.getElementById(this.for), window).then(data => {
      console.log(data.css)
//       let _outputExt = window.ART.render(
// `{{each blocks}}<{{$index}}>
// {{@ $value}}
// </{{$index}}>{{/each}}`, { blocks: window.vvg.page.ext })
//       https://regexr.com/556f6

      console.log(data.css)
      let cssObjTag = /<style[^>]*id="cssobj_[^>]*>[^<]*<\/style>/g
      // console.log(data.html)
      let _outputHtml =  data.html.replace('__EXT__', '')
        .replace(cssObjTag, '')
        .replace('__CSSOBJ__', data.css.join('\n\n'))
        .replace('<script src="https://unpkg.com/cssobj"></script>', '')
      window.toggleAppCodeModal(true, {
        content: _outputHtml
      })
    })
  }
  handleReload() {
    location.reload()
    // MoveTest.clear()
    //
    // setTimeout(() => {
    //   window.vvg.elementApp.reload('h5.ejs')
    //   if (window.vvg.blocks.reload) {
    //     // window.vvg.toggleLoading(true)
    //     window.vvg.blocks.reload()
    //     setTimeout(() => {
    //       window.MoveTest.updateType()
    //     }, 1000)
    //   }
    // }, 1000)
  }
  handleRrecompile() {

    let promiseArr = []
    for (let i = 0; i < vvg.eleScripts.length; i++) {
      promiseArr.push(new Promise((resolve, reject) => {
        vvg.reloadScripts(vvg.eleScripts[i]).then(() => {
          resolve()
        }).catch(e => {
          reject(e)
        })
      }))
    }

    Promise.allSettled(promiseArr).then(() => {
      window.MoveTest.updateType()
      window.XyMessage.info('compiled')
    })
  }
  handleOther() {
    window.open(location.origin + '/file')
    window.XyMessage.info('compiled')
  }
  render() {

//
    return html`<div>
<button class="button" type="button" @click="${this.handleHtml}">show html</button>
<button class="button" type="button" @click="${this.handleSave}">save</button>
<button class="button" type="button" @click="${this.handleRrecompile}">compile</button>
<!--<button class="button" type="button" @click="${this.handleReload}">reload</button>-->
<!--<button class="button" type="button" @click="${this.handleOther}">getfile</button>-->
</div>`;
  }
}
customElements.define('my-control-webview', MyControlWebview);
